<template>
  <div class="request-party-service-manage">
    <div class="app-container">
      <div class="mainbox">
        <Header :header-name="$route.meta.title" />

        <div class="request-party-service-manage-body">

          <!-- 搜索板块 -->
          <el-form ref="formRef" :model="form" inline label-width="80px" class="search-form">
            <el-form-item prop="serviceName">
              <el-input v-model="form.serviceName" clearable placeholder="请输入服务名称或服务编号" />
            </el-form-item>
            <!--            <el-form-item prop="serviceCode">-->
            <!--              <el-input v-model="form.serviceCode" clearable placeholder="请输入服务编号" />-->
            <!--            </el-form-item>-->
            <el-form-item prop="systemName">
              <el-input v-model="form.systemName" clearable placeholder="服务系统名称" />
            </el-form-item>

            <el-form-item class="query-action">
              <el-button type="primary" @click="getTableData"> 查询 </el-button>
              <el-button :loading="loading" @click="resetBtn"> 重置 </el-button>
              <el-button @click="addBtnList"> 批量申请 </el-button>
            </el-form-item>
          </el-form>

          <!-- 表格数据视图 -->
          <div>
            <FlexTable
              v-loading="loading"
              border
              :data="tableData"
              :columns="columnsOptions"
              @selection-change="handleSelectionChange"
            />

            <el-pagination
              :page-size="pagination.pageSize"
              :current-page.sync="pagination.pageNo"
              layout="prev, pager, next, jumper"
              :total="pagination.totalPage"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
        <Request-interface ref="addListRef" @resetBtn="resetBtn()" />
        <el-dialog
          title="服务详情"
          :visible.sync="dialogVisible"
          width="1000px"
        >
          <DialogDetail ref="dialogDetailRef" :data-list="dataList" />
        </el-dialog>
        <add-batches-open-ser ref="AddBatchesOpenSerRef" :table-data="tableData" />
      </div>
    </div>
  </div>
</template>

<script>
import { serviceManagerPage } from '../../api/myOpenService'
import RequestInterface from '@/views/myOpenService/components/requsetInterface'
import DialogDetail from '@/views/myOpenService/components/dialogDetail'
import AddBatchesOpenSer from '@/views/myOpenService/components/addBatchesOpenSer.vue'

export default {
  name: 'OpenService',
  components: {
    RequestInterface,
    DialogDetail,
    AddBatchesOpenSer
  },
  data () {
    return {
      dataList: {},
      dialogVisible: false,
      form: {},
      loading: false,
      tableData: [],
      columnsOptions: [
        { label: '服务名称', prop: 'serviceName' },
        { label: '服务编号', prop: 'serviceCode' },
        { label: '服务系统', prop: 'systemName' },
        { label: '操作', width: 200,
          customRender: (scope) => {
            return [
              <el-button type='text' onClick={() => this.publicBtn(scope.row)}> 详情 </el-button>,
              <el-button type='text' onClick={() => this.addBtn(scope.row)}> 申请 </el-button>
            ]
          }
        }
      ],
      pagination: {
        pageNo: 1,
        pageSize: 10,
        totalPage: 0
      }
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    addBtnList() {
      this.$refs.AddBatchesOpenSerRef.dialogVisible = true
    },
    publicBtn(val) {
      this.dialogVisible = true
      this.dataList = val
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.pagination.pageNo = val
      this.getTableData()
    },
    // 查询
    async getTableData () {
      this.loading = true
      try {
        const { code, data } = await serviceManagerPage({
          pageNo: this.pagination.pageNo,
          pageSize: this.pagination.pageSize,
          ...this.form,
          serviceCode: this.form.serviceName
        })
        if (code === '00000') {
          this.tableData = data.rows
          this.pagination.totalPage = data.totalRows
        }
      } finally {
        this.loading = false
      }
    },
    // 重置按钮
    resetBtn() {
      Object.assign(this.form, {
        serviceName: null,
        systemName: null
      })
      this.getTableData()
    },
    addBtn(val) {
      this.$refs.addListRef.dialogVisible = true
      this.$refs.addListRef.dataList = val
    },
    //   表格选中的数据
    handleSelectionChange(val) {
    }
  }
}
</script>

<style lang="scss" scoped>
.request-party-service-manage {
  background: #F2F2F2;

  &-body {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    height: calc(100vh - 254px);
    overflow-y: auto;
  }
  .el-pagination {
    text-align: right;
    margin-top: 20px;
  }

  .el-tree {
    ::v-deep .el-tree-node__expand-icon {
      font-size: 18px;
    }
    .custom-tree-node {
      width: calc(100% - 30px);
      display: flex;
      align-items: center;
      padding-right: 20px;

      > span:first-child {
        display: inline-block;
        width: calc(100% - 50px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 40px;
      }

      .tree-btn {
        .el-switch {
          margin-top: -4px;
          margin-left: 10px;
        }
      }
    }
  }
}
.open_ser_row{
  width: 100%;
  padding: 0 50px;
  margin-bottom: 30px;
  .open_ser_col{
    display: flex;
    .open_ser_div_name{
      margin-right: 5px;
      font-weight: 600;
      font-size: 15px;
    }
  }
}
</style>
